<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>批量导入</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            微信号批量导入管理&nbsp;&nbsp;
                            <a href="javascript:importLayer();" data-type="t" class="layui-btn layui-btn-sm">导入文件(A16或62数据)</a>
                        </div>
                        <div class="layui-card-body">
                            <table id="LAY-wechat-import" lay-filter="LAY-wechat-import"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var uploading = false;
        var importLayer;
        var reloadList;
        var displayPreview;
        var confirmFile;
        var cancelFile;
        layui.use(['table', 'element', 'laytpl', 'form', 'upload'], function(){
            var $ = layui.$
                ,layer = layui.layer
                ,table = layui.table
                ,form = layui.form
                ,laytpl = layui.laytpl
                ,element = layui.element
                ,upload = layui.upload;

            element.init();

            //第一个实例
            table.render({
                elem: '#LAY-wechat-import'
//            ,height: 315
                ,url: '/wechat_import/list_data' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
//                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    {field: 'created', title: '导入时间', width:170, fixed: 'left', sort: true}
                    ,{field: 'orig_name', title: '文件', width:300, fixed: 'left', sort: true}
                    ,{field: 'type', title: '数据类型', width:140, templet: '#typeTpl'}
                    ,{field: 'version', title: '登录版本', width:140, templet: '#versionTpl'}
                    ,{field: 'msg', title: '提示信息'}
                    ,{field: 'status', title: '状态', sort: true, width:100, templet: '#statusTpl', unresize: true}
                    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
                ]]
                ,title: '列表'
//            ,toolbar: '#toolbarDemo'
//            ,defaultToolbar: ['filter']
            });

            importLayer = function () {
                var board_html = tpl_import.innerHTML;
                layer.open({
                    type: 1,
//                offset: 't',
                    area: '600px',
                    title: '批量导入微信号（按文件名分组）',
                    closeBtn: 0,
                    shadeClose: false,
                    content: board_html,
                    btn: ['提交', '取消'],
                    success: function () {
                        form.render();
                    },
                    yes: function(index, layero){
                        var data = new FormData($('#uploadForm')[0]);
                        var type = $('input[name="type"]:checked').val();
                        if (type == undefined) {
                            layer.msg("请选择数据类型", {icon: 5});
                            return false;
                        }
                        if (type == 1 || type == 3) {
                            var android_version_id = $('input[name="android_version_id"]:checked').val();
                            if (android_version_id == undefined) {
                                layer.msg("请选择登录版本", {icon: 5});
                                return false;
                            }
                        } else if (type == 2) {
                            var ios_version_id = $('input[name="ios_version_id"]:checked').val();
                            if (ios_version_id == undefined) {
                                layer.msg("请选择登录版本", {icon: 5});
                                return false;
                            }
                        }
                        if(uploading){
                            layer.msg("文件正在上传中，请稍候", {icon: 5});
                            return false;
                        }
                        $.ajax({
                            type: "POST",
                            url: "/wechat_import/save/",
                            data: data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            beforeSend: function(){
                                uploading = true;
                            },
                            success:function(response){
                                var dataObj=$.parseJSON(response);
                                if (dataObj.code === 0) {
                                    if (dataObj.canPreview == true) {
                                        displayPreview(dataObj.id);
                                    }
                                    layer.close(index);
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                                uploading = false;
                            },
                            error: function (request, status, error) {
                                layer.msg('哦噢，网络开小差了', {icon: 5});
                                uploading = false;
                            }
                        });
                    }
                    ,btn2: function(index, layero){
                        setTimeout(function(){
                            reloadList();
                        }, 1000);
                    }
                });
            };

            displayPreview = function (id) {
                var post = {
                    id: id
                };
                $.ajax({
                    type: "POST",
                    url: "/wechat_import/preview",
                    data: post,
                    success: function (response) {
                        var dataObj = $.parseJSON(response);
                        if (dataObj.code === 0) {
                            var previewData = dataObj.data;
                            var board_html = '';
                            var getTpl = tpl_preview.innerHTML;
                            var data = {'id':id, 'previewData':previewData};
                            laytpl(getTpl).render(data, function(html){
                                board_html = $.trim(html);
                            });
                            layer.open({
                                type: 1,
                                title: '数据文件预览',
                                area: ['900px', '450px'],
                                shadeClose: false,
                                content: board_html,
                                btn: ['确认格式正确', '取消'],
                                yes: function(index, layero){
                                    confirmFile(index);
                                }
                                ,btn2: function(index, layero){
                                    setTimeout(function(){
                                        reloadList();
                                    }, 1000);
                                }
                            });
                        } else {
                            layer.msg(dataObj.msg, {icon: 5});
                        }
                    },
                    error: function (request, status, error) {
                        layer.msg('哦噢，网络开小差了', {icon: 5});
                    }
                });
            };

            confirmFile = function(layerIndex) {
                layer.confirm('确认格式正确？', function(index){
                    var id = $('#id').val();
                    if (id > 0) {
                        var post = {
                            id: id
                        };
                        $.ajax({
                            type: "POST",
                            url: "/wechat_import/confirm",
                            data: post,
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg(dataObj.msg, {icon: 1});
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                            },
                            error: function (request, status, error) {
                                layer.msg('哦噢，网络开小差了', {icon: 5});
                            }
                        });
                        layer.close(layerIndex);
                        setTimeout(function(){
                            reloadList();
                        }, 1000);
                    } else {
                        layer.msg('文件ID不存在', {icon: 5});
                    }
                });
            };

            cancelFile = function(id) {
                layer.confirm('确认取消导入？', function(index){
                    if (id > 0) {
                        var post = {
                            id: id
                        };
                        $.ajax({
                            type: "POST",
                            url: "/wechat_import/cancel",
                            data: post,
                            success: function (response) {
                                var dataObj = $.parseJSON(response);
                                if (dataObj.code === 0) {
                                    layer.msg(dataObj.msg, {icon: 1});
                                } else {
                                    layer.msg(dataObj.msg, {icon: 5});
                                }
                            },
                            error: function (request, status, error) {
                                layer.msg('哦噢，网络开小差了', {icon: 5});
                            }
                        });
                        setTimeout(function(){
                            reloadList();
                        }, 1000);
                    } else {
                        layer.msg('文件ID不存在', {icon: 5});
                    }
                });
            };

            reloadList = function () {
                var status = $('#status').find("option:selected").val();
                table.reload('LAY-wechat-import', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            };

            form.on('radio(deviceTypeFilter)', function(data){
                console.log(data.elem); //得到radio原始DOM对象
                console.log(data.value); //被点击的radio的value值
                if (data.value == 1 || data.value == 3) {
                    $('#android_version').removeClass('layui-hide');
                    $('#ios_version').addClass('layui-hide');
                } else if (data.value == 2) {
                    $('#android_version').addClass('layui-hide');
                    $('#ios_version').removeClass('layui-hide');
                } else {
                    $('#android_version').addClass('layui-hide');
                    $('#ios_version').addClass('layui-hide');
                }
            });
        });
    </script>
    <script type="text/html" id="barDemo">
        {{# if(d.status == 0){ }}
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="displayPreview({{d.id}});">预览</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="cancelFile({{d.id}});">取消</button>
        {{# } else if(d.status == 3){ }}
        <a class="layui-btn layui-btn-sm" href="/wechat_import/detail/{{d.id}}">结果</a>
        {{# } }}
    </script>
    <script type="text/html" id="statusTpl">
        {{# if(d.status == 0){ }}
        <span style="color: black;">等待确认</span>
        {{# } else if(d.status == 1){ }}
        <span style="color: orange;">等待处理</span>
        {{# } else if(d.status == 2){ }}
        <span style="color: blue;">正在处理</span>
        {{# } else if(d.status == 3){ }}
        <span style="color: green;">处理完成</span>
        {{# } else if(d.status == 4){ }}
        <span style="color: red;">处理失败</span>
        {{# } else if(d.status == 5){ }}
        <span style="color: black;">已取消</span>
        {{# } }}
    </script>
    <script type="text/html" id="typeTpl">
        {{# if(d.type == 1){ }}
        <span style="color: orange;">A16数据</span>
        {{# } else if(d.type == 2){ }}
        <span style="color: blue;">62数据</span>
        {{# } else if(d.type == 3){ }}
        <span style="color: blue;">A16数据特别版</span>
        {{# } }}
    </script>
    <script id="tpl_import" type="text/html">
        <form id="uploadForm" class="layui-form" action="" enctype="multipart/form-data">
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label">登录版本</label>
                <div class="">
                    <div class="">
                        <input type="radio" name="version" value="0" title="旧版本">
                        <input type="radio" name="version" value="1" title="新版本" checked>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label">分组设置</label>
                <div class="">
                    <div class="">
                        <input type="radio" name="group_type" value="1" title="系统设置">
                        <input type="radio" name="group_type" value="2" title="按文件名" checked>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数据类型</label>
                <div class="">
                    <div class="">
                        <input type="radio" name="type" value="1" title="A16数据"  lay-filter="deviceTypeFilter">
                        <input type="radio" name="type" value="2" title="62数据" lay-filter="deviceTypeFilter">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录版本</label>
                <div class="">
                    <div class="" id="android_version">
                        <input type="radio" name="android_version_id" value="9" title="Android 7.0.6">
                        <input type="radio" name="android_version_id" value="4" title="Android 7.0.4">
                        <input type="radio" name="android_version_id" value="3" title="Android 7.0.3">
                        <input type="radio" name="android_version_id" value="2" title="海外版 Android 7.0.3">
                        <input type="radio" name="android_version_id" value="1" title="Android 6.7.3">
                    </div>
                    <div class="layui-hide" id="ios_version">
                        <input type="radio" name="ios_version_id" value="8" title="iOS 7.0.4">
                        <input type="radio" name="ios_version_id" value="7" title="iOS 7.0.3">
                        <input type="radio" name="ios_version_id" value="6" title="iOS 6.7.4">
                        <input type="radio" name="ios_version_id" value="5" title="iOS 6.7.3">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数据文件</label>
                <div class="layui-input-inline">
                    <input type="file" name="weChatFile" placeholder="请上传文件" required autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">帮助</label>
                <div class="layui-input-inline layui-text">
                    <a class="layui-form-mid" href="/help/index/3" target="_blank">A16和62数据文件格式说明</a>
                </div>
            </div>
        </form>
    </script>
    <script id="tpl_preview" type="text/html">
        <input type="hidden" id="id" name="id" value="{{d.id}}">
        <table class="layui-table" lay-size="sm">
            <tbody>
            {{#  layui.each(d.previewData, function(index, rows){ }}
            <tr>
                {{#  layui.each(rows, function(index, item){ }}
                <td>{{item}}</td>
                {{#  }); }}
            </tr>
            {{#  }); }}
            </tbody>
        </table>
    </script>
    <script type="text/html" id="versionTpl">
        {{ d.version || '默认' }}
    </script>
</div>
</body>
</html>
